<!DOCTYPE html>
<html>
<head>
	<script src="http://code.jquery.com/jquery.js" type="text/javascript"></script>
	<script src="../../jsrender.js" type="text/javascript"></script>
	<script src="../../jquery.observable.js" type="text/javascript"></script>
	<script src="../../jquery.views.js" type="text/javascript"></script>
	<link href="../resources/demos.css" rel="stylesheet" type="text/css" />
	<link href="../resources/masterdetail.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="nav"><a href="../demos.html">JsViews Demos</a></div>

<h3>Server rendered content, activated in client. With client data 'delta'...</h3>

<div class="box label">This sample illustrates static content on the page that could have been server-rendered from data.<br />
Activation would be run only if JavaScript is enabled in the browser (simulated here by clicking on the 'Activate' button)<br />
- enabling an 'Unobtrusive JavaScript' approach.</div>
<div class="buttons">
	<button onclick="activate()">Activate</button>
	<button onclick="showData()">show data</button>
	<button onclick="deleteLastLanguage()">delete last language</button>
</div>

<div class="comment">First activate, and then click to select and edit</div>

<table>
	<thead><tr><th>Title</th><th>Languages</th><th><span id="addMovieBtn">Add</span></th></tr></thead>
	<tbody id="movieList">
		<tr style="background-color: yellow;" class="hover" data-link="css-background-color{:~bgColor(~app.selectedItem)}">
			<td>
				<span data-link="#index+1">1</span>:
				<span data-link="title">Meet Joe Black</span>
			</td>
			<td>
				<div data-link="name">English</div>
				<div data-link="name">French</div>
			</td>
			<td>
				<img class="close" src="../resources/close.png"></img>
			</td>
		</tr>
		<tr style="background-color: rgb(253, 253, 254);" class="hover" data-link="css-background-color{:~bgColor(~app.selectedItem)}">
			<td>
				<span data-link="$view[index]+1">2</span>:
				<span data-link="title">Eyes Wide Shut</span>
			</td>
			<td>
				<div data-link="name">French</div>
				<div data-link="name">German</div>
				<div data-link="name">Spanish</div>
			</td>
			<td>
				<img class="close" src="../resources/close.png"></img>
			</td>
		</tr>
	</tbody>
</table>

<div id="movieDetail">
	<div>
		<div class="title">Title:</div>
		<div><input value="Meet Jo Black" data-link="title" ></div>
		<div class="title">Languages: <span id="addLanguageBtn">Add</span></div>
		<div>
			<input value="English" data-link="name" ><img class="close" src="../resources/close.png"></img>
			<input value="French" data-link="name" ><img class="close" src="../resources/close.png"></img>
		</div>
	</div>
</div>

<script id="movieTemplate" type="text/x-jsrender">
	<tr class="hover" data-link="css-background-color{:~bgColor(#index, ~app.selectedItem)}">
		<td>
			<span data-link="#index+1"></span>:
			<span data-link="title"></span>
		</td>
		<td>
			{^{for languages}}
				<div data-link="name"></div>
			{{/for}}
		</td>
		<td>
			<img class="close" src="../resources/close.png"></img>
		</td>
	</tr>
</script>

<script id="detailViewTemplate" type="text/x-jsrender">
	<div>
		<div class="title">Title:</div>
		<div><input data-link="title" /></div>
		<div class="title">Languages: <span id="addLanguageBtn">Add</span></div>
		<div>
			{^{for languages}}
				<input data-link="name" /><img class="close" src="../resources/close.png"></img>
			{{/for}}
		</div>
	</div>
</script>

<script type="text/javascript">
	var counter = 0,
		activated = false,
		app = {
			selectedItem: null
		},

		movies = [
			{
				title: "Meet Joe Black",
				languages: [
					{ name: "English" },
					{ name: "Extra Language in client data" },
					{ name: "French" }
				]
			},
			{
				title: "Extra Movie in client data",
				languages: [
					{ name: "Latin" },
					{ name: "Greek" }
				]
			},
			{
				title: "Eyes Wide Shut",
				languages: [
					{ name: "French" },
					{ name: "German" },
					{ name: "Spanish" }
				]
			}
		];

	$.templates({
		movieTmpl: "#movieTemplate",
		detailTmpl: "#detailViewTemplate"
	});

	function activate() {
		if ( activated ) {
			return;
		}
		$( "#movieDetail" )
			.on( "click", "#addLanguageBtn", function() {
				var languages = $.view( this ).data.languages;
				$.observable( languages ).insert( languages.length, {
					name: "NewLanguage" + counter++
				});
			})

			.on( "click", ".close", function() {
				var view = $.view( this );
				$.observable( view.parent.data ).remove( view.index, 1 );
// Or equivalently:	$.observable( app.selectedItem.data.languages).remove( view.index, 1 );
				return false;
			});

		$( "#addMovieBtn" ).on( "click", function() {
			$.observable( movies ).insert( movies.length, {
				title: "NewTitle" + counter,
				languages: [
					{ name: "NewLanguage" + counter++ }
				]}
			);

			// Set selection on the added item
			select( $.view( "#movieList tr:last" ));
		});

		$.observable.observe( app, "selectedItem",  function( event, args ) {
			var selectedView = args.value;
			if ( selectedView ) {
				$.link.detailTmpl( "#movieDetail", selectedView.data );
			} else {
				$( "#movieDetail" ).empty();
			}
		});

		$.views.helpers({
			bgColor: function ( index, selectedItem ) {
				// index could also be obtained from the view, which is available as the 'this' context for this function
				// var index = this.index
				return (selectedItem && selectedItem.index === index) ? "yellow" : ( index%2 ? "#fdfdfe" : "#efeff2" );
			},
			app: app
		});

		$.link.movieTmpl( "#movieList", movies )
			.on( "click", "tr", function() {
				select( $.view( this ));
			})
			.on( "click", ".close", function() {
				select();
				$.observable( movies ).remove( $.view( this ).index, 1 );
				return false;
			});

		// Set selection on the last item
		select( $.view( "#movieList tr:last" ));
		activated = true;
	}

	function select( view ) {
		if ( app.selectedItem !== view ) {
			$.observable( app ).setProperty( "selectedItem", view );
		}
	}

	function deleteLastLanguage() {
		if ( movies.length ) {
			var languages = movies[ movies.length - 1 ].languages;
			$.observable( languages ).remove( languages.length - 1, 1 );
		}
	}
</script>

<!--================ End of Demo Section ================-->

<!--Console-->

<script id="showData" type="text/x-jsrender">
	<div><b>Movie:</b> {{>title}} <b>languages:</b> {{for languages}} {{>name}}{{/for}}</div>
</script>

<div id="console">
</div>

<script type="text/javascript">
	function showData() {
		$( "#console" ).append("<hr/>");
		$( "#console" ).append( $( "#showData" ).render( movies ));
	}
</script>
</body></html>
